<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, User, Crop, EditPen, SwitchButton,
} from '@element-plus/icons-vue'
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

import {userInfoService} from '@/api/admin/user.js'
import useUserInfoStore from '@/stores/userinfo.js'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
//调用函数,获取用户详细信息
const getUserInfo = async()=>{
  //调用接口
  let result = await userInfoService();
  //数据存储到pinia中
  userInfoStore.setInfo(result.data);
}

getUserInfo();
//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'
import {ref} from "vue";
const handleCommand = (command)=>{
  //判断指令
  if(command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //退出登录
          //1.清空pinia中存储的token以及个人信息
          tokenStore.removeToken()
          userInfoStore.removeInfo()

          //2.跳转到登录页面
          router.push('/')
          ElMessage({
            type: 'success',
            message: '退出登录成功',
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '用户取消了退出登录',
          })
        })
  }else{
    //路由
    router.push('/user/'+command)
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header><el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
        >
          <el-menu-item index="0">
            亲爱的用户：<strong>{{ userInfoStore.info.nickname }}</strong>
          </el-menu-item>
          <el-menu-item index="1">校邻通后台</el-menu-item>
          <el-menu-item>
            <el-dropdown placement="bottom-end" @command="handleCommand">
                <span class="el-dropdown__box">
                    <el-avatar :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" />
                </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                  <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                  <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
                  <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-menu-item>
          <!--            <el-sub-menu index="2">-->
          <!--              <template #title><el-avatar :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" /></template>-->
          <!--              <el-menu-item index="2-1" command="info" :icon="User">item one</el-menu-item>-->
          <!--              <el-menu-item index="2-2">item two</el-menu-item>-->
          <!--              <el-menu-item index="2-3">item three</el-menu-item>-->
          <!--              <el-menu-item index="2-3">item three</el-menu-item>-->
          <!--            </el-sub-menu>-->
        </el-menu>
      </el-header></el-header>
      <el-container>
        <el-aside width="180px">
          <el-row class="tac" style="height: 100vh; display: flex;">
            <el-col style="display: flex; flex-direction: column;">
              <el-menu
                  default-active="/article/manage"
                  class="el-menu-vertical-demo"
                  router        style="flex-grow: 1; display: flex; flex-direction: column;"
              >
                <el-menu-item index="/panel/panel">
                  <el-icon><icon-menu /></el-icon>
                  <span>仪表盘</span>
                </el-menu-item>
                <el-menu-item index="/article/manage">
                  <el-icon><document /></el-icon>
                  <span>文章管理</span>
                </el-menu-item>
                <el-menu-item index="/article/category">
                  <el-icon><setting /></el-icon>
                  <span>分类管理</span>
                </el-menu-item>
                <el-menu-item index="/school">
                  <el-icon><setting /></el-icon>
                  <span>学校管理</span>
                </el-menu-item>
                <el-menu-item index="/coding" disabled>
                  <el-icon><setting /></el-icon>
                  <span>点赞收藏</span>
                </el-menu-item>
                <el-sub-menu index="">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>个人中心</span>
                  </template>
                  <el-menu-item index="/user/info">基本资料</el-menu-item>
                  <el-menu-item index="/user/avatar">更换头像</el-menu-item>
                  <el-menu-item index="/user/resetPassword">重置密码</el-menu-item>
                </el-sub-menu>
                <div style="flex-grow: 1"></div>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <div class="sticky-main">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<style>
.common-layout {
  height: 100vh;
  width: 100%;
}
.el-menu-vertical-demo {
  height: 100%; /* 使菜单高度占满整个列容器 */
  display: flex;
  flex-direction: column;
}
.sticky-main {
  position: sticky;
  top: 0; /* 固定在顶部 */
  overflow-y: auto; /* 启用垂直滚动条 */
  max-height: 90vh; /* 设置最大高度为视口高度 */
}

.sticky-main::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
</style>
